﻿import React from 'react';
import ReactDOM from 'react-dom/client';
import HemisphereDisplay from "./HemisphereDisplay";
class App extends React.Component{

    state = { latitude :null,errorMessage:  ''}

    componentDidMount() {
        //this.setState({ latitude:-12.34 })
        window.navigator.geolocation.getCurrentPosition(
            (position) => {
                this.setState({ latitude:position.coords.latitude })
            },
            (error) => {
                this.setState({ errorMessage:error.message})
            }
        );
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('componentDidUpdate')
    }

    render(){
        if(this.state.errorMessage && !this.state.latitude){
            return <div> { this.state.errorMessage }</div>
        }
        if(!this.state.errorMessage && this.state.latitude){
            return <div> <HemisphereDisplay latitude = { this.state.latitude }/> </div>
        }
        else{
            return <div> Loading... </div>
        }
    }
}

const container = document.querySelector('#root');
const root = ReactDOM.createRoot(container);
root.render(<App />);